<!-- 
@name: 首页
-->
<template>
	<div id="confirmOrder" class="page">
		<!--pages/commodityDetails/commodityDetails.vml-->
		<van-skeleton title :row="3" :loading="!detailData.pkey">
			<div style='margin-bottom:100rpx;'>
				<div class='whiteWrap' v-if="detailData.payType">
					<div class="title">支付方式/单价</div>
					<div class="text1" style="padding:0.2rem">
						<van-radio-group v-model="payType" @change='isChange'>
							<van-radio name="CASH" style="margin-bottom:0.2rem" v-if="detailData.payType.indexOf('CASH') !=-1">
								<div class="flex-between">
									<div>金额</div>
									<div>
										<span style="color: #D95954;" v-if="goodsPa.vipPrice">{{$store.state.userinfo.isVip?goodsPa.vipPrice:goodsPa.price}}元</span>
										<span style="color: #D95954;" v-else>{{goodsPa.price}}元</span>

									</div>
								</div>
								<template #icon="props">
									<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
								</template>
							</van-radio>
							<van-radio name="PV" style="margin-bottom:0.2rem" v-if="detailData.payType.indexOf('PV') !=-1">
								<div class="flex-between">
									<div>积分</div>
									<div>
										<span style="color: #D95954;" v-if="goodsPa.vipPv">{{$store.state.userinfo.isVip?goodsPa.vipPv:goodsPa.pv}}积分</span>
										<span style="color: #D95954;" v-else>{{goodsPa.pv}}积分</span>
									</div>
								</div>
								<template #icon="props">
									<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
								</template>
							</van-radio>
							<van-radio name="BOTH" style="margin-bottom:0.2rem" v-if="detailData.payType.indexOf('BOTH') !=-1">
								<div class="flex-between">
									<div>积分+金额</div>
									<div>
										<span style="color: #D95954;" v-if="goodsPa.vipPartPrice&&goodsPa.vipPartPv">
											{{$store.state.userinfo.isVip?goodsPa.vipPartPrice:goodsPa.partPrice}}元+{{$store.state.userinfo.isVip?goodsPa.vipPartPv:goodsPa.partPv}}积分</span>
										<span style="color: #D95954;" v-else>{{goodsPa.partPrice}}元+{{goodsPa.partPv}}积分</span>
									</div>
								</div>
								<template #icon="props">
									<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
								</template>
							</van-radio>

						</van-radio-group>

					</div>
				</div>
				<div class='whiteWrap'>
					<div class="goodsWrap">
						<div class="flex-row" style="padding-bottom:0.0rem;">
							<img object-fit="fill" class="icon1" :src="detailData.photo?detailData.photo[0]:''"></img>
							<div class="flex-column " style="flex:1">
								<div class="flex-between flex-alignCenter">
									<div class="text3">{{detailData.name}}</div>
									<div class="text4">剩余库存{{goodsPa.kcNum}}</div>
								</div>
								<div class="text4">可用时间至{{detailData.endDate}}</div>
							</div>
						</div>
						<div class="flex-between" style="padding:0.4rem 0">
							<div>({{goodsPa.specification}}) 数量</div>
							<div>
								<van-stepper color='#000' @change="computePrice" v-model="couponNum" theme="round" button-size="22" disable-input />
							</div>
						</div>
						<div v-if="payType!='PV'" class="flex-between" style="padding:0.4rem 0;border-top:1px solid #eee">
							<div>优惠卷</div>
							<div style="color:red" v-if="couponMember.pkey" @click="selectCoupon">
								-<span style="font-size:0.2rem">￥</span>{{couponMember.sub}}
								<van-icon name="arrow" />
							</div>
							<div v-else @click="selectCoupon" style="color:#999">
								未选择
								<van-icon name="arrow" />
							</div>
						</div>
						<div class="flex-between" style="padding:0.4rem 0;border-top:1px solid #eee">
							<div>总价</div>
							<div>
								{{totalPrice&&totalPv?`${totalPrice}元+${totalPv}积分`:
								totalPrice&&!totalPv?`${totalPrice}元`:
								`${totalPv}积分`
								}}
							</div>
						</div>
						<div v-if="payType!='PV'" class="flex-between" style="padding:0.4rem 0;border-top:1px solid #eee">
							<div>实际支付</div>
							<div>
								{{totalPrice&&totalPv?`${payTotalPrice}元+${totalPv}积分`:
								totalPrice&&!totalPv?`${payTotalPrice}元`:
								`${totalPv}积分`
								}}
							</div>
						</div>
						<div v-if="goodsPa.payStr" class="flex-between" style="color:red;padding:0.4rem 0;border-top:1px solid #eee">
							<div style="min-width:2rem">限购提醒</div>
							<div v-html="goodsPa.payStr" style="text-align:right"></div>
						</div>
					</div>
				</div>

				<!-- 底部操作栏 -->
				<div class="bottom">
					<div class="flex-between flex-alignCenter">
						<div class="flex-row flex-alignCenter" style="margin-left:0.2rem;white-space: nowrap;">
							合计：
							<div class="text2">
								{{totalPrice&&totalPv?`${payTotalPrice}元+${totalPv}积分`:
								totalPrice&&!totalPv?`${payTotalPrice}元`:
								`${totalPv}积分`
								}}
							</div>
						</div>
						<van-button class="button3" v-if="detailData.enabled&&detailData.priceStatus!='EXPIRED'" :loading='loading' @click="submit">提交订单</van-button>
						<van-button class="button4" v-if="!detailData.enabled || detailData.priceStatus=='EXPIRED'">{{!detailData.enabled?'已下架':'抢购已结束'}}</van-button>
					</div>

				</div>
				<!-- 底部操作栏 end -->
			</div>
		</van-skeleton>
	</div>
</template>
<script>
export default {
	name: 'app',
	components: {},
	data() {
		return {
			html: '<p>限购1件</p><p>限时2件</p>',
			loading: false,
			detailData: [],
			goodsPa: {}, // 选中的规格
			activeIcon: require('@/assets/images/radio2.png'),
			inactiveIcon: require('@/assets/images/radio.png'),
			couponNum: 1,
			payType: '', //CASH PV BOTH
			totalPrice: '', //总价
			totalPv: '', //总积分
			payTotalPrice: '', //减去优惠卷的价格
			referrer: '',
			couponMember: {}, //选中的优惠卷
			amt: '',
		};
	},

	created() {
		this.get_goods();
		if (this.$route.query.referrer) {
			this.referrer = this.$route.query.referrer;
		}
		if (this.$route.query.couponNum) {
			this.couponNum = this.$route.query.couponNum;
		}
		if (this.$route.query.payType) {
			this.payType = this.$route.query.payType;
		}
		if (this.$route.query.couponMember) {
			this.couponMember = JSON.parse(this.$route.query.couponMember);
		}
	},
	methods: {
		selectCoupon() {
			this.$router.push({
				path: '/personal/coupon',
				query: {
					pkey: this.$route.query.pkey,
					goodsPa: this.$route.query.goodsPa,
					referrer: this.$route.query.referrer,
					amt: this.amt,
					couponNum: this.couponNum,
					payType: this.payType,
				},
			});
		},
		isChange(e) {
			this.computePrice();
			this.couponMember = {};
		},
		computePrice() {
			var price = 0;
			var pv = 0;
			var amt = ''; //选中的实际付款金额
			if (this.$store.state.userinfo.isVip) {
				//是会员用户
				if (this.payType == 'CASH') {
					if (this.goodsPa.vipPrice) {
						price = (
							this.goodsPa.vipPrice * this.couponNum
						).toFixed(2);
					} else {
						price = (this.goodsPa.price * this.couponNum).toFixed(
							2
						);
					}
				} else if (this.payType == 'PV') {
					if (this.goodsPa.vipPv) {
						pv = (this.goodsPa.vipPv * this.couponNum).toFixed(2);
					} else {
						pv = (this.goodsPa.pv * this.couponNum).toFixed(2);
					}
				} else if (this.payType == 'BOTH') {
					if (this.goodsPa.vipPartPrice && this.goodsPa.vipPartPv) {
						price = (
							this.goodsPa.vipPartPrice * this.couponNum
						).toFixed(2);
						pv = (this.goodsPa.vipPartPv * this.couponNum).toFixed(
							2
						);
					} else {
						price = (
							this.goodsPa.partPrice * this.couponNum
						).toFixed(2);
						pv = (this.goodsPa.partPv * this.couponNum).toFixed(2);
					}
				}
			} else {
				if (this.payType == 'CASH') {
					price = (this.goodsPa.price * this.couponNum).toFixed(2);
				} else if (this.payType == 'PV') {
					pv = (this.goodsPa.pv * this.couponNum).toFixed(2);
				} else if (this.payType == 'BOTH') {
					price = (this.goodsPa.partPrice * this.couponNum).toFixed(
						2
					);
					pv = (this.goodsPa.partPv * this.couponNum).toFixed(2);
				}
			}

			this.totalPrice = price;
			if (this.couponMember.sub) {
				var payTotalPrice = 0;
				payTotalPrice = (price - this.couponMember.sub).toFixed(2);
				this.payTotalPrice = payTotalPrice < 0 ? 0 : payTotalPrice;
			} else {
				this.payTotalPrice = price;
			}
			this.totalPv = pv;
			this.amt = price;
		},
		submit() {
			if (!this.payType) {
				this.$notify({ type: 'warning', message: '请选择支付方式' });

				return;
			}
			this.loading = true;
			var params = {
				goods: this.$route.query.pkey,
				goodsPa: this.goodsPa.pkey,
				num: this.couponNum,
				payType: this.payType,
				referrer: this.referrer,
				couponMember: this.couponMember.pkey
					? this.couponMember.pkey
					: '',
			};
			this.$myApi.commitOrder_order(params).then((res) => {
				this.loading = false;
				if (res.code == 0) {
					// this.$notify({ type: 'success', message: '操作成功' });
					this.goPay(res.result);
				} else {
				}
			});
		},
		goPay(pkey) {
			this.$router.replace({
				path: '/coupon/payOrder',
				query: { pkey: pkey },
			});
		},
		get_goods(pkey) {
			var params = {
				pkey: this.$route.query.pkey,
			};
			this.$myApi.get_goods(params).then((res) => {
				if (res.code == 0) {
					if (this.$route.query.goodsPa) {
						res.result.goodsPaList.map((item) => {
							if (item.pkey == this.$route.query.goodsPa) {
								this.goodsPa = item;
							}
						});
					} else {
						this.goodsPa = res.result.goodsPaList[0];
					}

					this.detailData = res.result;
					if (!this.payType) {
						this.payType = this.detailData.payType[0];
					}
					this.computePrice();
				} else {
				}
			});
		},
	},
};
</script>
<style lang="less">
#confirmOrder {
	padding-left: 0rem;
	padding-right: 0rem;
	min-height: 100vh;
	background-color: #fafafa;
	padding-bottom: 1.5rem;
	img {
		width: 100%;
	}
	.bannerImg {
		height: 7.5rem;
		width: 100%;
	}
	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		// padding: 0.16rem 0.24rem;
		background: #fff;
		.icon {
			width: 0.36rem;
			height: 0.36rem;
		}
		.text1 {
			font-size: 0.22rem;
			color: #333333;
		}
		.text2 {
			font-size: 0.34rem;
			font-weight: bold;
			color: #d95954;
			margin-right: 0.2rem;
		}
	}
	.goodsWrap {
		.text1 {
			font-size: 0.32rem;
			color: #333333;
			font-weight: 800;
			margin-bottom: 0.24rem;
		}
		.text2 {
			font-size: 0.26rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		width: 100%;
		overflow-x: scroll;
		.icon1 {
			height: 1.14rem;
			width: 1.14rem;
			border-radius: 10px;
			margin-right: 0.24rem;
		}
		.icon2 {
			width: 0.32rem;
			height: 0.32rem;
			margin-bottom: 0.12rem;
		}
		.icon3 {
			width: 0.24rem;
			height: 0.3rem;
			margin-bottom: 0.12rem;
		}
		.text3 {
			font-size: 0.3rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			width: 3.3rem;
			// margin-bottom: 0.1rem;
		}
		.text4 {
			font-size: 0.24rem;
			font-weight: 500;
			color: #666666;
			margin-top: 10px;
		}
	}
	.whiteWrap {
		width: 7rem;
		padding: 0.24rem 0.16rem;
		margin-left: 0.25rem;
		background: #fff;
		position: relative;
		box-sizing: border-box;
		margin-top: 0.2rem;
		.img-icon {
			height: 0.32rem;
			width: 0.32rem;
		}
		.title {
			font-size: 0.32rem;
			color: #333333;
			font-weight: 800;
			margin-bottom: 0.24rem;
		}
		.text1 {
			font-size: 0.28rem;
			color: #333333;
		}
	}
	.button {
		background: #ffce17;
		border-radius: 20px;
		font-size: 0.26rem;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333;
		padding: 0.1rem 0.34rem;
		height: auto;
	}
	.button3 {
		background: #f8a446;
		font-size: 0.26rem;
		font-family: PingFang SC;
		/* font-weight: bold; */
		color: #333;
		padding: 0.3rem 0.57rem;
		height: 100%;
		color: #fff;
		width: 4rem;
	}
	.button4 {
		background: gray;
		font-size: 0.26rem;
		font-family: PingFang SC;
		/* font-weight: bold; */
		color: #333;
		padding: 0.3rem 0.57rem;
		height: 100%;
		color: #fff;
		width: 4rem;
	}

	.button2 {
		.button();
		background: #d95954;
		color: #fff;
		padding: 0.17rem 0.23rem;
	}
}
</style>
<style lang="less" scoped>
/deep/.van-stepper--round .van-stepper__plus {
	color: #fff;
	background-color: #d95954;
}
/deep/.van-radio__label {
	flex: 1;
}
</style>
